import { getUserInfoUrl, getUserTypeValue } from "@/command/apiTool";
import { defineComponent, ref } from "vue";
import PageTitle from "@/components/PageTitle";
import ListView from "@/components/ListView";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import RoundInfo from "@/components/RoundInfo";
import GreyBlock from "@/components/GreyBlock";
import RowView from "@/components/RowView";
import TextView from "@/components/TextView";
import { Divider } from "vant";
import FilterMenuSearch from "@/components/FilterMenuSearch";
import CardView from "@/components/CardView";
import { useRequest } from "./request";
import RoundEdgeButtonGroup from "@/components/RoundEdgeButtonGroup";
import { useRouter } from "vue-router";

export default defineComponent({
  setup(props, {}) {
    const router = useRouter();
    const form = ref({});
    const { page, btnAction } = useRequest();
    const renderItem = (e: any) => {
      const buttons: IButtonGroupViewData[] = [
        {
          text: "拒绝",
          type: "primary",
          plain: true,
          onClick: () => {
            btnAction({
              applyType: "2",
              farmerId: e.id,
              userId: e.userId,
            });
          },
        },
        {
          text: "同意",
          type: "primary",
          onClick: () => {
            btnAction({
              applyType: "1",
              farmerId: e.id,
              userId: e.userId,
            });
          },
        },
      ];
      const data = [
        {
          name: getUserTypeValue() == "dh" ? "种植品种" : "主营业务",
          value: e.productTypeName,
        },
      ];
      return (
        <div class="flex flex-col mt-[14px] w-full">
          <RoundInfo
            onClick={() => router.push(`/formationDetail?id=${e.id}`)}
            // right={() => <Text>日期: {e.date}</Text>}
            src={e.logo}
            title={e.entityName}
            data={data}
          />
          <GreyBlock class="mt-[12px]">
            <RowView class="justify-between flex-1">
              <RowView>
                <TextView limitedNumber={1}>{e.address}</TextView>
              </RowView>
              <RoundEdgeButtonGroup data={buttons} />
            </RowView>
          </GreyBlock>
          <Divider />
        </div>
      );
    };
    const render2 = () => {
      const data: IFilterMenuChoose[] = [
        { type: "area", key: "code" },
        { type: "productType", key: "productTypeId", title: "种植品种" },
        { type: "datePicker", key: "time" },
      ];
      return (
        <CardView title="申请列表" radius={0} class={"mt-[10px]"}>
          <FilterMenuSearch choose={data} v-model={form.value}  searchKey="name"/>
          <ListView
            {...getUserInfoUrl({
              dh: "/api/H5/richHelpFormationApply/large/applyList",
              xh: "",
            })}
            type="page"
            ref={page}
            renderItem={renderItem}
            params={form.value}
          />
        </CardView>
      );
    };
    return () => <PageTitle title={"结队申请"}>{render2()}</PageTitle>;
  },
});
